<!-- HTML5 sekce pro diskuzi -->
      <section id="content">        
        <div class="block">
          <header>
            <div class="top-right text-gray"><strong>Posledních 30 dní</strong></div>
            <h2>Unikátní návštěvníci</h2>
          </header>
          <section class="block-body">
            <div id="visitors-unique" style="width:100%;height:300px;"></div>
          </section>
        </div>
        <div class="block-bottom"></div>
        <div class="block">
          <header>
            <div class="top-right text-gray"><strong>Posledních 12 měsíců</strong></div>
            <h2>Měsíčně unikátní návštěvníci</h2>
          </header>
          <section class="block-body">
            <div id="visitors-unique-month" style="width:100%;height:300px;"></div>
          </section>
        </div>
        <div class="block-bottom"></div>
        <div class="block">
          <header>
            <h2>Nejnavštěvovanější kategorie</h2>
          </header>
          <section class="block-body">
            <div id="categories-top-hits-hover" style="position: absolute; top: 10px; left: 10px;"></div>
            <div id="categories-top-hits" style="width:100%;height:400px;"></div>
          </section>
        </div>
        <div class="block-bottom"></div>
      </section>
      <script id="source">
        $(function () {

          function showTooltip(x, y, contents) {
            $('<div id="tooltip" style="text-shadow: 1px 1px 0 #fff;">' + contents + '</div>').css( {
              position: 'absolute',
              display: 'none',
              top: y + 10,
              left: x + 5,
              border: '1px solid #fdd',
              padding: '5px',
              'background-color': '#fee',
              opacity: 1
            }).appendTo("body").fadeIn(200);
          }

          // helper for returning the weekends in a period
          function weekendAreas(axes) {
            var markings = [];
            var d = new Date(axes.xaxis.min);
            // go to the first Saturday
            d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
            d.setUTCSeconds(0);
            d.setUTCMinutes(0);
            d.setUTCHours(0);
            var i = d.getTime();
            do {
              // when we don't set yaxis, the rectangle automatically
              // extends to infinity upwards and downwards
              markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
              i += 7 * 24 * 60 * 60 * 1000;
            } while (i < axes.xaxis.max);

            return markings;
          }
          
          <?php if (! empty($daily['values'])):
		$values = array();
		foreach ($daily['values'] as $value) {
			$values[] = "[ {$value[0]}, {$value[1]} ]";
		}
          ?>
            var d = [<?php echo implode(', ', $values); ?>];
          // first correct the timestamps - they are recorded as the daily
          // midnights in UTC+0100, but Flot always displays dates in UTC
          // so we have to add one hour to hit the midnights in the plot
          for (var i = 0; i < d.length; ++i)
            d[i][0] += 60 * 60 * 1000;

          var options = {
            series: {
              lines: { show: true, lineWidth: 3 },
              points: { show: true },
              shadowSize: 1
            },
            xaxis: { mode: "time", tickSize: [1, "day"], monthNames: ["Led", "Úno", "Bře", "Dub", "Kvě", "Čer", "Čvc", "Srp", "Zář", "Říj", "Lis", "Pro"]},
            yaxis: { minTickSize: 1, tickDecimals: 0, min: 0 },
            selection: { mode: "x" },
            grid: { hoverable: true, clickable: true, markings: weekendAreas }
          };

          var plot = $.plot($("#visitors-unique"), [d], options);

          // now connect the two

          var previousPoint = null;
          $("#visitors-unique").bind("plothover", function (event, ranges, item) {

            if (item) {
              if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0],
                y = item.datapoint[1];
                var d = new Date(x);
                var dmesic = d.getMonth()+1;
                showTooltip(item.pageX, item.pageY, "Počet návštěv dne "+d.getDate()+". "+dmesic+". "+d.getFullYear()+": <strong>"+y+"</strong>");
              }
            }
            else {
              $("#tooltip").remove();
              previousPoint = null;
            }
          });


          $("#visitors-unique").bind("plotclick", function (event, pos, item) {
            if (item) {
              alert("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
              plot.highlight(item.series, item.datapoint);
            }
          });
            <?php else: ?>
          $("#visitors-unique").html('<p>Nebyla nalezena potřebná data.</p>');
          <?php endif; ?>

          <?php if (! empty($monthly['values'])):
		$values = array();
		foreach ($monthly['values'] as $value) {
			$values[] = "[ {$value[0]}, {$value[1]} ]";
		}
          ?>
            var d = [<?php echo implode(', ', $values); ?>];
          // first correct the timestamps - they are recorded as the daily
          // midnights in UTC+0100, but Flot always displays dates in UTC
          // so we have to add one hour to hit the midnights in the plot
          for (var i = 0; i < d.length; ++i)
            d[i][0] += 60 * 60 * 1000;

          var options = {
            series: {
                stack: false,
                lines: {show: false, steps: false },
                bars: {show: true, barWidth: 2628000000, align: 'center'}
            },
            xaxis: { tickSize: [1, "month"], mode:"time", monthNames: ["Leden", "Únor", "Březen", "Duben", "Květen", "Červen", "Červenec", "Srpen", "Září", "Říjen", "Listopad", "Prosinec"] },
            yaxis: { minTickSize: 1, tickDecimals:0, min:0 },
            grid: { hoverable: true, clickable: true }
          };

          var plot = $.plot($("#visitors-unique-month"), [d], options);

          // now connect the two

          var previousPoint = null;
          $("#visitors-unique-month").bind("plothover", function (event, ranges, item) {

            if (item) {
              if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0],
                y = item.datapoint[1];
                var d = new Date(x);
                var dmesic = d.getMonth()+1;
                showTooltip(item.pageX, item.pageY, "Počet návštěv za "+dmesic+". měsíc "+d.getFullYear()+": <strong>"+y+"</strong>");
              }
            }
            else {
              $("#tooltip").remove();
              previousPoint = null;
            }
          });


          $("#visitors-unique-month").bind("plotclick", function (event, pos, item) {
            if (item) {
              alert("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
              plot.highlight(item.series, item.datapoint);
            }
          });
            <?php else: ?>
          $("#visitors-unique-month").html('<p>Nebyla nalezena potřebná data.</p>');
          <?php endif; ?>
          <?php
          $values = array();
          foreach ($top_hits as $item) {
            $values[] = '{ label: "' . ucfirst($item->uri) . '", data:' . $item->hits . '}';
          }
          ?>

          var data = [<?php echo implode(', ', $values); ?>];

          $.plot($("#categories-top-hits"), data,
          {
            series: {
              pie: {
                show: true,
                radius: 1,
                stroke: {width:2},
                label: {
                  show: true,
                  radius: 3/4,
                  threshold: 0.04,
                  formatter: function(label, series){
                    return '<div style="font-size:8pt;text-align:center;padding:2px;color:#fff;text-shadow: 1px 1px 0 #2e252b;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
                  },
                  background: { opacity: 0.5 }
                }
              }
            },
            grid: {
              hoverable: true
            },
            legend: {
              show: false
            }
          });

          $("#categories-top-hits").bind("plothover", pieHover);
          function pieHover(event, pos, obj) {
            if (!obj) return;
            percent = parseFloat(obj.series.percent).toFixed(2);
            $("#categories-top-hits-hover").html('<span style="font-size: 1.2em; font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%) <br /> '+obj.series.data[0][1]+' návštěv</span>');
          }

        });
      </script>
